<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Nibbles</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, GTK#, Nibbles, Qyoto, Visual Basic">
<meta name="description" content="Nibbles">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Nibbles</h1>

<p>
In this part of the Visual Basic GTK# programming tutorial, we will create a Nibbles game clone.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 

<p>
<b>Nibbles</b> is an older classic video game. It was first created in late 70s.
Later it was brought to PCs. In this game the player controls a snake.
The objective is to eat as many apples as possible. Each time the snake eats an apple,
its body grows. The snake must avoid the walls and its own body. 
</p>


<h2>Development</h2>

<p>
The size of each of the joints of a snake is 10px. The snake is controlled with 
the cursor keys. Initially, the snake has three joints. The game starts immediately. 
When the game is finished, we display "Game Over" message in the center of the window.
</p>

<div class="codehead">board.vb</div>
<pre class="code">
Imports Gtk
Imports Cairo

NameSpace BoardSpace

Public Class Board 
    Inherits DrawingArea 

    Const WIDTH As Integer = 300
    Const HEIGHT As Integer = 300
    Const DOT_SIZE As Integer = 10
    Const ALL_DOTS As Integer = 900
    Const RAND_POS As Integer = 30
    Const DELAY As Integer = 140

    Dim x(ALL_DOTS) As Integer 
    Dim y(ALL_DOTS) As Integer 

    Dim dots As Integer
    Dim apple_x As Integer
    Dim apple_y As Integer

    Dim left As Boolean = False
    Dim right As Boolean = True

    Dim up As Boolean = False
    Dim down As Boolean = False
    Dim inGame As Boolean = True

    Dim dot As ImageSurface
    Dim apple As ImageSurface
    Dim head As ImageSurface


    Public Sub New
        
        MyBase.New

        ModifyBg(StateType.Normal, New Gdk.Color(0, 0, 0))
       
        Me.InitGame
      
    End Sub


    Private Sub InitGame

        dots = 3
      
        For z As Integer = 0 To dots-1 
            x(z) = 50 - z*10
            y(z) = 50
        Next
        
        Try 
            dot = New ImageSurface("dot.png")
            head = New ImageSurface("head.png")
            apple = New ImageSurface("apple.png")
        Catch 
            Console.WriteLine("Images not found")
            Environment.Exit(1)
        End Try

        Me.LocateApple

        Dim timer As New GLib.TimeoutHandler(AddressOf Me.OnTimer)

        GLib.Timeout.Add(100, timer)
        AddHandler Me.ExposeEvent, AddressOf Me.OnExpose
        
    End Sub


    Protected Sub OnExpose(ByVal sender As Object, ByVal e As ExposeEventArgs) 

        Dim cc As Cairo.Context = Gdk.CairoHelper.Create(sender.GdkWindow)

        If inGame
            Me.DrawObjects(cc)
        Else 
            Me.GameOver(cc)
        End If
       
        Dim disposeTarget As IDisposable = CType(cc.Target, IDisposable)
        disposeTarget.Dispose
        
        Dim disposeContext As IDisposable = CType(cc, IDisposable)
        disposeContext.Dispose
        
    End Sub

    Private Sub DrawObjects(ByVal cc As Cairo.Context) 

        cc.SetSourceSurface(apple, apple_x, apple_y)
        cc.Paint

        For z As Integer = 0 to dots - 1
            If z = 0
                cc.SetSourceSurface(head, x(z), y(z))
                cc.Paint
            Else 
                cc.SetSourceSurface(dot, x(z), y(z))
                cc.Paint
            End If 
        Next
        
    End Sub

    Private Sub GameOver(ByVal cc As Cairo.Context) 

        Dim message As String = "Game Over"
        
        Dim x As Integer = Allocation.Width / 2
        Dim y As Integer = Allocation.Height / 2

        cc.SetSourceRGB(1, 1, 1)
        cc.SetFontSize(18)
        
        Dim extents As TextExtents = cc.TextExtents(message)
        
        cc.MoveTo(x - extents.Width/2, y)
        cc.ShowText(message)
        inGame = False
        
    End Sub


    Private Sub CheckApple

        If x(0) = apple_x And y(0) = apple_y
        
            dots += 1
            Me.LocateApple
            
        End If
        
    End Sub
 
    Private Sub Move

        For z As Integer = dots To 1 Step -1
            x(z) = x(z - 1)
            y(z) = y(z - 1)
        Next

        If left 
            x(0) -= DOT_SIZE
        End If

        If right
            x(0) += DOT_SIZE
        End If
            
        If up 
            y(0) -= DOT_SIZE
        End If

        If down 
            y(0) += DOT_SIZE
        End If
            
    End Sub


    Private Sub CheckCollision

        For z As Integer = dots To 1 Step -1
            If z > 4 And x(0) = x(z) And y(0) = y(z) 
                inGame = False
            End If
        Next   
    
        If y(0) > HEIGHT 
            inGame = False
        End If
    
        If y(0) < 0 
            inGame = False
        End If
    
        If x(0) > WIDTH 
            inGame = False
        End If

        If x(0) < 0 
            inGame = False
        End If
            
    End Sub
        
    
    Private Sub LocateApple
    
        Dim rand As New Random

        Dim r As Integer = rand.Next(RAND_POS)
        
        apple_x = r * DOT_SIZE
        r = rand.Next(RAND_POS)
        apple_y = r * DOT_SIZE
       
        
    End Sub

    Private Function OnTimer As Boolean

        If inGame
            
            Me.CheckApple
            Me.CheckCollision
            Me.Move
            Me.QueueDraw
            
            Return True
            
         Else 
            Return False
        End If
        
    End Function

    Public Sub OnKeyDown(ByVal e As Gdk.EventKey)
        
        Dim key As Integer = e.KeyValue

        If key = Gdk.Key.Left AndAlso Not right
            left = True
            up = False
            down = False
        End If

        If key = Gdk.Key.Right AndAlso Not left
            right = True
            up = False
            down = False
        End If
        
        If key = Gdk.Key.Up AndAlso Not down
            up = True
            right = False
            left = False
        End If

        If key = Gdk.Key.Down AndAlso Not up
            down = True
            right = False
            left = False
        End If

    End Sub
    
End Class

End Namespace
</pre>

<p>
First we will define some globals used in our game. 
</p>

<p>
The <b class="keyword">WIDTH</b> and <b class="keyword">HEIGHT</b> constants determine 
the size of the Board. The <b class="keyword">DOT_SIZE</b> is the size of the apple and the dot
of the snake. The <b class="keyword">ALL_DOTS</b> constant defines the maximum number of 
possible dots on the Board.
The <b class="keyword">RAND_POS</b> constant is used to calculate a random position of an apple. 
The <b class="keyword">DELAY</b> constant determines the speed of the game.
</p>

<pre class="explanation">
Dim x(ALL_DOTS) As Integer 
Dim y(ALL_DOTS) As Integer 
</pre>

<p>
These two arrays store x, y coordinates of all possible joints of a snake. 
</p>

<p>
The <b class="keyword">InitGame</b> method initializes variables, loads 
images and starts a timeout function.
</p>

<pre class="explanation">
 If inGame
     Me.DrawObjects(cc)
 Else 
     Me.GameOver(cc)
 End If
</pre>

<p>
Inside the <b class="keyword">OnExpose</b> method, we check the <b class="keyword">inGame</b>
variable. If it is true, we draw our objects. The apple and the snake joints. 
Otherwise we display "Game over" text.  
</p>

<pre class="explanation">
 Private Sub DrawObjects(ByVal cc As Cairo.Context) 

     cc.SetSourceSurface(apple, apple_x, apple_y)
     cc.Paint

     For z As Integer = 0 to dots - 1
         If z = 0
             cc.SetSourceSurface(head, x(z), y(z))
             cc.Paint
         Else 
             cc.SetSourceSurface(dot, x(z), y(z))
             cc.Paint
         End If 
     Next
    
End Sub
</pre>

<p>
The <b class="keyword">DrawObjects</b> method draws the apple and the joints of the
snake. The first joint of a snake is its head, which is represented by a red circle. 
</p>

<pre class="explanation">
 Private Sub CheckApple

     If x(0) = apple_x And y(0) = apple_y
    
         dots += 1
         Me.LocateApple
        
     End If 
    
 End Sub
</pre>

<p>
The <b class="keyword">CheckApple</b> method checks, if the snake has hit
the apple object. If so, we add another snake joint and call the 
<b class="keyword">LocateApple</b> method, which randomly places a new apple object. 
</p>

<p>
In the <b class="keyword">Move</b> method we have the key algorithm of the game. 
To understand it, look at how the snake is moving. You control the head of the snake. 
You can change its direction with the cursor keys. The rest of the joints move
one position up the chain. The second joint moves where the first was, 
the third joint where the second was etc. 
</p>

<pre class="explanation">
For z As Integer = dots To 1 Step -1
    x(z) = x(z - 1)
    y(z) = y(z - 1)
Next
</pre>

<p>
This code moves the joints up the chain. 
</p>

<pre class="explanation">
If left
    x(0) -= DOT_SIZE
End If
</pre>

<p>
Move the head to the left.
</p>

<p>
In the <b class="keyword">CheckCollision</b> method, we determine if the snake
has hit itself or one of the walls. 
</p>


<pre class="explanation">
For z As Integer = dots To 1 Step -1
    If z > 4 And x(0) = x(z) And y(0) = y(z) 
        inGame = False
    End If
Next   
</pre>

<p>
Finish the game, if the snake hits one of its joints with the head.
</p>

<pre class="explanation">
If y(0) > HEIGHT 
    inGame = False
End If
</pre>

<p>
Finish the game, if the snake hits the bottom of the Board. 
</p>

<p>
The <b class="keyword">LocateApple</b> method locates an apple randomly 
on the board.
</p>

<pre class="explanation">
Dim rand As New Random

Dim r As Integer = rand.Next(RAND_POS)
</pre>

<p>
We get a random number from 0 to RAND_POS - 1. 
</p>

<pre class="explanation">
apple_x = r * DOT_SIZE
...
apple_y = r * DOT_SIZE
</pre>

<p>
These line set the x, y coordinates of the apple
object. 
</p>

<pre class="explanation">
 If inGame
    
     Me.CheckApple
     Me.CheckCollision
     Me.Move
     Me.QueueDraw
    
     Return True
    
 Else 
     Return False
 End If
</pre>

<p>
Every 140 ms, the <b class="keyword">OnTimer</b> method is called. If 
we are in the game, we call three methods, that build the logic of the game.
Otherwise we return <b class="keyword">False</b>, which stops the timer event.
</p>


<p>
In the <b class="keyword">OnKeyDown</b> method of the Board class, we 
determine the keys that were pressed.
</p>

<pre class="explanation">
 If key = Gdk.Key.Left AndAlso Not right
     left = True
     up = False
     down = False
 End If
</pre>

<p>
If we hit the left cursor key, we set <b class="keyword">left</b> variable to 
true. This variable is used in the <b class="keyword">Move</b>
method to change coordinates of the snake object. Notice also, that
when the snake is heading to the right, we cannot turn immediately 
to the left. 
</p>

<div class="codehead">nibbles.vb</div>
<pre class="code">
' ZetCode Mono Visual Basic GTK# tutorial
'
' In this program, we create
' a Nibbles game clone
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports Gtk
 
Public Class GtkVBApp
    Inherits Window

    Dim WIDTH As Integer = 250
    Dim HEIGHT As Integer = 150
    Dim board As BoardSpace.Board

    Public Sub New
    
        MyBase.New("Nibbles")

        board = New BoardSpace.Board
        Me.Add(board)

        AddHandler Me.DeleteEvent, AddressOf Me.OnDelete

        Me.Resize(310, 310)
        Me.Move(300, 300)
        Me.ShowAll
        
    End Sub
    
    Private Sub OnDelete(ByVal sender As Object, _
            ByVal args As DeleteEventArgs)
        Application.Quit
    End Sub

    
    Protected Overrides Function OnKeyPressEvent(ByVal e As Gdk.EventKey) As Boolean
        board.OnKeyDown(e)
        Return True
    End Function

    Public Shared Sub Main
    
        Application.Init
        Dim app As New GtkVBApp
        Application.Run
        
    End Sub

End Class
</pre>

<p>
In this class, we set up the Nibbles game. 
</p>


<pre class="explanation">
 Protected Overrides Function OnKeyPressEvent(ByVal e As Gdk.EventKey) As Boolean
     board.OnKeyDown(e)
     Return True
 End Function
</pre>

<p>
In this class, we catch the key press events. And delegate the processing to the
<b class="keyword">OnKeyDown</b> method of the board class. 
</p>

<br>
<img src="/img/gui/vbgtk/nibbles.png" alt="Nibbles">
<div class="figure">Figure: Nibbles</div>

<p>
The following command compiles the game.
</p>

<pre>
vbnc -r:/usr/lib/mono/gtk-sharp-2.0/gtk-sharp.dll 
  -r:/usr/lib/mono/gtk-sharp-2.0/gdk-sharp.dll -r:/usr/lib/mono/2.0/Mono.Cairo.dll 
  -r:/usr/lib/mono/gtk-sharp-2.0/glib-sharp.dll nibbles.vb board.vb
</pre>


<hr class="btm">

<p>
This was the Nibbles computer game programmed with the GTK# library and the 
Visual Basic programming language.
</p>


<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified May 25, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div>  <!-- content -->

</div>  <!-- container -->

</body>
</html>

